<template>
  <el-dialog
    :visible.sync="dialogVisible"
    top="10vh"
    append-to-body
    :close-on-click-modal="false"
    class="tag-edit-dialog monitor-flow-history-dialog"
    width="80%"
    @closed="clearDialog"
    v-dialogMove
  >
    <div slot="title">
      <tag-content-header>
        <template #title>
          <span class="title-text">工作流历史调度列表</span>
        </template>
      </tag-content-header>
    </div>
    <tag-content-header refresh setting @toolFun="toolFun" :settingData="columns"></tag-content-header>
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
    >
      <template #status="{ scope }">
        <span :class="{ 'failed-item': scope.row.status === 'FAILED' }">{{ scope.row.status }}</span>
      </template>
      <template #operation="{ scope }">
        <div class="operation-button-box">
          <el-tooltip effect="dark" content="查看工作流" placement="top" :enterable="false">
            <icon-svg name="iconIndex" @click.native="handleFlow(scope.row)"></icon-svg>
          </el-tooltip>
          <el-tooltip effect="dark" content="查看技术日志" placement="top" :enterable="false">
            <icon-svg name="iconLog" @click.native="handleLog(scope.row)"></icon-svg>
          </el-tooltip>
        </div>
      </template>
    </tag-table>
    <span slot="footer" class="dialog-footer"></span>
    <flow-tree-dialog ref="flowTreeDialog"></flow-tree-dialog>
    <log-dialog ref="logDialog"></log-dialog>
  </el-dialog>
</template>

<script>
import flowTreeDialog from './schedule-flow-tree'
import logDialog from './log-dialog'
export default {
  components: {
    flowTreeDialog,
    logDialog
  },
  data() {
    return {
      dialogVisible: false,
      flowId: '',
      projectName: '',
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '工作流ID',
          prop: 'flowId',
          align: 'center'
        },
        {
          show: true,
          label: '调度ID',
          prop: 'execId',
          align: 'center'
        },
        {
          show: true,
          label: '预计开始时间',
          prop: 'submitDateTime',
          align: 'center',
          width: 160
        },
        {
          show: true,
          label: '实际开始时间',
          prop: 'startDateTime',
          align: 'center',
          width: 160
        },
        {
          show: true,
          label: '任务结束时间',
          prop: 'endDateTime',
          align: 'center',
          width: 160
        },
        {
          show: true,
          label: '任务执行状态',
          prop: 'status',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 100
        }
      ],
      params: {
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {}
      },
      totalSize: 0
    }
  },
  methods: {
    showDialog(params) {
      this.flowId = params.flowId
      this.projectName = params.projectName
      this.getList()
      this.dialogVisible = true
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('azkaban/azkabanExecutionHistory/flowExecutionPage'),
        method: 'get',
        params: this.$ajax.setParams(this.getParams())
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.executions
            this.totalSize = data.data.total
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    getParams() {
      let params = {
        currentPageNum: this.params.currentPageNum,
        pageSize: this.params.pageSize,
        queryParams: {
          flow: this.flowId,
          project: this.projectName
        }
      }
      return params
    },
    toolFun(operation) {
      switch (operation) {
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    handleFlow(row) {
      this.$refs.flowTreeDialog.showDialog(row.execId)
    },
    handleLog(row) {
      this.$refs.logDialog.showDialog(row.execId, 'history')
    },
    clearDialog() {
      this.flowId = ''
      this.projectName = ''
      this.dataList = []
      this.loading = false
      this.params = {
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {}
      }
      this.totalSize = 0
    }
  }
}
</script>

<style lang="scss">
.monitor-flow-history-dialog {
  .el-dialog__body {
    .tag-content-header {
      padding: 0 20px;
    }
    .failed-item {
      color: $tag-red;
    }
  }
}
</style>
